<h3>列过滤器在表格外部</h3>
<div style="position: relative; width: 100%">
  <!-- 列过滤器 -->
  <lv-select
    [lvOptions]="columns"
    [(ngModel)]="showColumns"
    (ngModelChange)="onFilterColumns($event)"
    lvMode="multiple"
    lvShowFilter
    lvShowCheckAll
    lvFilterKey="label"
    lvFilterMode="contains"
    lvPanelClass="ui-table-col-select-panel"
    class="ui-table-col-select"
  >
    <lv-select-trigger style="text-align: center; width: 100%">列配置</lv-select-trigger>
  </lv-select>
  <lv-datatable [lvData]="data" #lvTable lvSelectionMode="multiple" [lvSelection]="selection" (lvSelectionChange)="selectionChange($event)">
    <thead>
      <tr>
        <th lvShowCheckbox width="64px" [lvRowsData]="lvTable.renderData | selectable" (lvCheckChange)="checkAllChange($event)"></th>
        <ng-container *ngFor="let col of columns; let i = index">
          <th *ngIf="!col.hidden" [lvCellKey]="col.key" [ngStyle]="{ width: i === 2 ? '20%' : '' }">
            <span lv-overflow>{{ col.label }}</span>
          </th>
        </ng-container>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvTable.renderData">
        <tr>
          <td lvShowCheckbox [lvRowData]="item" [lvDisabled]="item.disabled" (lvCheckChange)="checkOneChange($event)"></td>
          <ng-container *ngFor="let col of columns">
            <td *ngIf="!col.hidden" [lvRowData]="item">
              <span lv-overflow>{{ item[col.key] }}</span>
            </td>
          </ng-container>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>
</div>

<h3>列过滤器在表格头部</h3>
<div style="position: relative; width: 100%">
  <lv-datatable
    class="customer-table"
    [lvData]="data"
    #lvTable
    [lvSize]="currentSize"
    lvSelectionMode="multiple"
    [lvSelection]="selection"
    (lvSelectionChange)="selectionChange($event)"
  >
    <thead>
      <tr>
        <th lvShowCheckbox style="width: 40px" [lvRowsData]="lvTable.renderData" (lvCheckChange)="checkAllChange($event)"></th>
        <ng-container *ngFor="let col of oColumns">
          <th *ngIf="!col.hidden" [lvCellKey]="col.key" [width]="col.width">
            <span lv-overflow>{{ col.label }}</span>
          </th>
        </ng-container>
        <th style="width: 16px; padding: 0">
          <!-- 列过滤器 -->
          <div class="ui-table-col-setting" [class.ui-table-col-setting-active]="visible">
            <i
              lv-icon="lv-icon-col-setting"
              lvColorState
              lv-popover
              [lvPopoverHeader]="tableSettingTitleTpl"
              [lvPopoverContent]="tableSettingConTpl"
              lvPopoverTheme="light"
              lvPopoverTrigger="click"
              lvPopoverPosition="bottomRight"
              lvPopoverShowArrow="false"
              lvPopoverClosable
              lvPopoverClassName="ui-col-setting-panel"
              [lvPopoverBeforeOpen]="beforeOpen"
              [lvPopoverAfterClose]="afterOpen"
            ></i>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvTable.renderData">
        <tr>
          <td lvShowCheckbox [lvRowData]="item" [lvDisabled]="item.disabled" (lvCheckChange)="checkOneChange($event)"></td>
          <ng-container *ngFor="let col of oColumns">
            <td *ngIf="!col.hidden" [lvRowData]="item">
              <span lv-overflow>{{ item[col.key] }}</span>
            </td>
          </ng-container>
          <td><!-- 列过滤器占位 --></td>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>

  <ng-template #tableSettingTitleTpl>
    <h2 class="ui-table-setting-title">{{ 'tableSetting' | i18n }}</h2>
  </ng-template>

  <ng-template #tableSettingConTpl>
    <lv-group class="ui-table-setting-content" lvDirection="vertical" lvGutter="24px">
      <lv-group lvDirection="vertical" lvGutter="4px">
        <span class="ui-table-setting-header">{{ 'rowHight' | i18n }}</span>

        <lv-radio-group [(ngModel)]="currentSize" lvGroupName="tableSize">
          <lv-group lvGutter="32px">
            <lv-radio lvValue="large">{{ 'high' | i18n }}</lv-radio>
            <lv-radio lvValue="default">{{ 'medium' | i18n }}</lv-radio>
            <lv-radio lvValue="small">{{ 'low' | i18n }}</lv-radio>
          </lv-group>
        </lv-radio-group>
      </lv-group>

      <lv-group lvDirection="vertical" lvGutter="4px">
        <span class="ui-table-setting-header">{{ 'columns' | i18n }}</span>

        <lv-checkbox-group [(ngModel)]="selected" (ngModelChange)="onChangeColumns($event)">
          <lv-group cdkDropList lvDirection="vertical" lvGutter="4px" (cdkDropListDropped)="drop($event)">
            <div *ngFor="let col of oColumns" class="ui-table-setting-item" cdkDrag>
              <div class="lv-drag-placeholder" *cdkDragPlaceholder></div>
              <lv-group lvGutter="8px">
                <lv-checkbox [lvValue]="col.label" [lvDisabled]="col.disabled"></lv-checkbox>
                <span>{{ col.label }}</span>
              </lv-group>
              <i lv-icon="lv-icon-col-drag"></i>
            </div>
          </lv-group>
        </lv-checkbox-group>
      </lv-group>
    </lv-group>
  </ng-template>
</div>
